import { needLevel, deptId, needWhere, needStatus, stringifyToArr, member, } from '@/filters';
import moment from 'moment';
import _ from 'lodash';
import { mapGetters, mapState, } from 'vuex';
import { tableCellIconData, } from '../common';
import attachment from '@/views/project/components/attachment/attachment.vue';

const icons = {
  file: require('@/assets/project/icons/file.svg'),
  vote: require('@/assets/project/icons/vote.svg'),
};

const _colorConfig = [{
  field: '1/end_project_order/item_before_project',
  color: '2D405E',
  memo: '黑色',
}, {
  field: '2/demand_inv_review/implement_start/item_program_review',
  color: 'E6A23C',
  memo: '深黄色',

}, {
  field: '4/3/demand_init/program_review_reject/reject_end',
  color: 'F56C6C',
  memo: '红色',

}, {
  field: 'item_establish/end_termination/implement_over',
  color: '67C23A',
  memo: '绿色',

}, {
  field: 'end_inv_reject',
  color: 'C0C4CC',
  memo: '灰色',

},
{
  field: 'demand_inv/demand_inv_review_next',
  color: '409EFF',
  memo: '蓝色',

}];
function color(text) {
  if (!text) {
    return `#E040FB`;
  }
  const rs = _.find(_colorConfig, (v, i) => {
    return v.field.includes(text.toString());
  });
  return `#${rs.color}`;
}

export default {
  computed: {
    ...mapState('dictionary', {
      urgentFilter: (v) => {
        return _.map(v.dicList.itemLevel, (e) => {
          return {
            text: e.name,
            value: Number(e.value),
          };
        });
      },
      whereFilter: (v) => {
        return _.map(v.dicList.itemType, (e) => {
          return {
            text: e.name,
            value: Number(e.value),
          };
        });
      },
      statusFilter: (v) => {
        return _.map(v.dicList.itemProcessShow, (e) => {
          return {
            text: e.name,
            value: e.value,
          };
        });
      },
    }),
    ...mapGetters(['userInfo']),
    userInfoFilterValue() {
      return [{
        text: this.userInfo.name,
        value: this.userInfo.id,
      }];
    },

    tableColumn() {
      return [{
        label: '序号',
        type: 'index',
        property: 'index',
        w: '85px',
        disabled: true,
        show: true,
        fixed: true,
      },
      {
        label: '需求标题',
        show: true,
        property: 'title',
        w: '246px',
        fixed: true,
        computed: (v) => {
          let icon = [];
          if (v['vote']) {
            icon = this.$createElement('img', {
              attrs: {
                src: icons.vote,
                width: '16px',
                height: '16px',
                alt: '投票',
              },
              style: {
                margin: '0 16px 0 0px',
              },
            });
          }
          return this.$createElement('div', {
            class: ['cell el-tooltip'],
          }, [icon, this.$createElement('span', v['title'])]);
        },
      },
      {
        label: '紧急程度',
        property: 'level',
        show: true,
        filter: this.urgentFilter,
        w: '120px',
        fixed: true,
        computed: (v) => {
          if (v.level || v.priority) {
            return this.$createElement('span', {
              domProps: {
                innerHTML: needLevel(v.level || v.priority),
              },
              style: {
                color: `${color(v.level || v.priority)}`,
              },
            });
          }
          return '-';
        },
      }, {
        label: '科室',
        show: true,
        fixed: false,

        property: 'organizer',
        w: '200px',
        computed: (v) => {
          if (v['organizer']) {
            return deptId(v.organizer);
          }
          return '-';
        },
      }, {
        label: '提出人',
        show: true,
        fixed: false,
        property: 'sponsor',
        w: '120px',
        computed: (v) => {
          return v['sponsor'] || '-';
        },
      }, {
        label: '调研负责人',
        show: true,
        fixed: false,

        filter: this.userInfoFilterValue,
        property: 'principal',
        w: '125px',
        computed: (v) => {
          return member(v.principal);
        },

      }, {
        fixed: false,

        label: '调研成员',
        show: true,
        property: 'users',
        w: '240px',
        filter: this.userInfoFilterValue,
        computed: (v) => {
          const p = member(v.users);
          return p;
        },
      }, {
        label: '提出日期',
        show: true,
        fixed: false,
        property: 'startTime',
        w: '145px',
        computed: (v) => moment(v['startTime']).format('YYYY-MM-DD'),
      }, {
        label: '期望完成日期',
        show: true,
        fixed: false,

        property: 'endTime',
        w: '145px',
        computed: (v) => {
          if (v['endTime']) {
            return moment(v['endTime']).format('YYYY-MM-DD');
          }
          return '-';
        },
      }, {
        label: '工单来源',
        show: true,
        fixed: 'right',
        property: 'itemType',
        filter: this.whereFilter,
        w: '120px',
        computed: (v) => needWhere(v.itemType),
      }, {
        label: '附件',
        show: true,
        fixed: false,

        property: 'enclosure',
        computed: (v) => {
          const num = stringifyToArr(v['enclosure']).length;
          return tableCellIconData(icons.file, num, v['enclosure'], attachment, '附件');
        },
      }, {
        label: '状态',
        property: 'showState',
        filter: this.statusFilter,
        fixed: 'right',
        show: true,
        w: '200px',
        computed: (v) => {
          if (!v.showState) {
            return '待提交';
          }
          return this.$createElement('span', {
            domProps: {
              innerHTML: v.state ? needStatus(v.showState) : '未提交',
            },
            style: {
              color: `${v.state ? color(v.showState) : ''}`,
            },
          });
        },
      }, {
        label: '操作',
        show: true,
        fixed: 'right',
        disabled: true,
        property: 'options',
        slot: [],
        w: '247px',
      }];
    },
  },

  methods: {
    popover(content, text) {
      return this.$createElement('el-popover', {
        props: {
          placement: 'bottom-start',
          trigger: 'hover',
          title: '',
          content: content,
        },
      }, [this.$createElement('span', {
        slot: 'reference',
        domProps: {
          innerHTML: text || '-',
        },
      })]);
    },

  },
};

